<%--
Created by IntelliJ IDEA.
User: SongTiantian
Date: 2020/11/18
Time: 17:33
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" autoFlush="true" buffer="100kb" %>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
	<%@include file="/front-end/views/common/head.jsp"%>
<style>
	.checkout-button{
		background-color: #eb002a;
		color:white;
		width: 100px;
		font-size: 15px;
		height: 40px;
	}
</style>
</head>

<body>

<div style="width:100%;height:80px;background-color: #eb002a;">
	<p style="color:white;font-size: 40px;margin-top: 10px;margin-left: 10px;position:absolute;">票淘淘</p>
</div>
<div>
   <div class="demo" style="">
   		<div id="seat-map" style="width:350px">
			<div class="front">屏幕</div>					
		</div>
		<div class="booking-details" style="width:300px">
			<img src="${requestScope.play.play_image}" alt="" style="width:120px;height: 200px;margin-left: 90px;">
			<p style="margin-left: 20px;">影片：<span>${requestScope.play.play_name}</span></p>
			<p style="margin-left: 20px;">时间：<span>${requestScope.schedule.sched_time}</span></p>
			<p style="margin-left: 20px;">座位：</p>
			<ul id="selected-seats"></ul>
			<!-- <p>票数：<span id="counter">0</span></p> -->
			<p style="margin-left: 20px;">总计：<b>￥<span id="total">0</span></b></p>
					
			<button class="checkout-button" id="submit" onclick="ajaxRequest()" style="border: #eb002a; ">确定购买</button>
			<button class="aaa" style="background-color: #eb002a;width:100px;height:40px;color:white;font-size: 15px;border:#eb002a;margin-left: 100px;"><a href="index.jsp" style="text-decoration:none;color:white;">返回首页</a></button>
					
			<div id="legend"></div>
		</div>
		<div style="clear:both"></div>
   </div>
	
  <br/>
</div>
<script type="text/javascript">
	var user_id = ${sessionScope.user.id};
	var studio_id = ${sessionScope.studio.studio_id};
	var sched_id= ${sessionScope.sched_id};
	var arrseat=[];
	var price = ${requestScope.play.play_ticket_price}; //票价
	$(document).ready(function() {
		var $cart = $('#selected-seats'), //座位区
				$counter = $('#counter'), //票数
				$total = $('#total'); //总计金额

		var sc = $('#seat-map').seatCharts({

			map:
					[  //座位图

						<c:forEach items="${ requestScope.map }" var="item">
						'${ item }',
						</c:forEach>
					],
			naming : {
				top : false,
				getLabel : function (character, row, column) {
					return column;
				}
			},
			click: function () { //点击事件
				if (this.status() == 'available') { //可选座
					$('<li id="row">'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')

							.attr('id', 'cart-item-'+this.settings.id)
							.data('seatId', this.settings.id)
							.appendTo($cart);
					$counter.text(sc.find('selected').length+1);
					$total.text(recalculateTotal(sc)+price);
					arrseat.push([[this.settings.row+1,this.settings.label]]);
					console.log(arrseat);


					return 'selected';
				} else if (this.status() == 'selected') { //已选中
					//更新数量
					$counter.text(sc.find('selected').length-1);
					//更新总计
					$total.text(recalculateTotal(sc)-price);
					//删除已预订座位
					$('#cart-item-'+this.settings.id).remove();
					//可选座
					return 'available';
				} else if (this.status() == 'unavailable') { //已售出
					return 'unavailable';
				} else {
					return this.style();
				}

			}

		});
	});
	//计算总金额
	function recalculateTotal(sc) {
		var total = 0;
		sc.find('selected').each(function () {
			total += price;
		});

		return total;
	}
	function ajaxRequest() {
		var xmlhttprequest = new XMLHttpRequest();
		var url = "user/indexServlet?action=buyTicket&arrseat="+arrseat+"&user_id="+user_id+"&studio_id="+studio_id+"&sched_id="+sched_id;
		xmlhttprequest.open("POST",url,true);
		xmlhttprequest.onreadystatechange = function(){
			if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
				var data = JSON.parse(xmlhttprequest.responseText);
				alert(data);
					window.location.href="user/indexServlet?action=myOrder";
			}
		}
		xmlhttprequest.send();
	}


</script>
<script src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="front-end/js/jquery.seat-charts.min.js"></script>

</body>
</html>